<template>
	<div>
		<el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="100px" class="demo-ruleForm">
			<el-row class="container">
				<h3>授权管理</h3>
				<el-col :span="12">
					<el-form-item label="授权名称" prop="accreditName">
						<el-input placeholder="请输入内容" v-model="ruleForm.accreditName" style="width:300px"></el-input>
					</el-form-item>
					<el-form-item label="授权内容">
                        <el-upload
                            class="upload-poster"                               
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-change="imgPreview"
                            :auto-upload="false">
                            <img v-if="contentImg" :src="contentImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    	jpg、png、gif格式，60x60像素，不超过2MB
                	</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="授权期限" prop="jyName">
						<el-date-picker
							value-format="yyyy-MM-dd"
							format="yyyy-MM-dd"
							style="width:300px"
							v-model="value1"
							type="daterange"
							@change="changeTime"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>授权企业</h3>
				<el-transfer 
					v-model="props"
					:props="{
						key: 'id',
						label: 'name'
					}"
					:data="data"
					:titles="['未选择企业', '已选择企业']"
					:button-texts="['移除', '添加']"
					@change="changeQY"
				></el-transfer>
			</el-row>
			<el-form-item class="footerFixed">
				<el-button type="primary" @click="sq_save">提交</el-button>
				<el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { empower_save,company_get_child } from "@/request/supervisionCenterApi.js"
	export default{
		data(){
			return{
				data:[],

				labelPosition: 'left',
				value1: '',
				props:[],
				ruleForm:{
					id:'',
					list:[]
				},
				contentImg:'',
				rules: {},
			}
		},
		mounted(){
			this.init()
		},
		methods:{
			init() {
				company_get_child().then((res) =>{
					this.data = res.data.filter((element, index) => {
						return element.examined  == "1";
					})
				})
			},
			//返回
			backPage() {
				this.$router.go(-1)
			},
			//提交
			sq_save() {
				this.ruleForm.companyNum = this.ruleForm.list.length
				let formdata = new FormData()
				for(var a in this.ruleForm){
					if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
						this.ruleForm[a] = ""
						formdata.append(a,'') 
					}else{
						formdata.append(a,this.ruleForm[a])
					}
				}
				for(var i=0;i<this.ruleForm.list.length;i++){
					// if(formdata.specification[i].files != "" && formdata.specification[i].files != null){
					//     formdata.append("files",this.cropList[i].files)
					// }
					var s = "list[" + i + "].id"
					formdata.set(s,this.ruleForm.list[i].id)
					var d = "list[" + i + "].accreditId"
					formdata.set(d,this.ruleForm.list[i].accreditId)
					var f = "list[" + i + "].companyName"
					formdata.set(f,this.ruleForm.list[i].companyName)
					var g = "list[" + i + "].companyId"
					formdata.set(g,this.ruleForm.list[i].companyId)
				}
				empower_save(formdata).then((res) =>{
					this.$notify({
						    title: '提示',
						    message: '添加成功',
						    type: 'success',
						    duration:1000
						});
					this.$router.go(-1)
				})
			},
			//选择日期
			changeTime() {
				this.ruleForm.accreditTime = this.value1[0]
				this.ruleForm.accreditExpire = this.value1[1]
				console.log(this.ruleForm);
			},
			//选择企业
			changeQY(a,b,row){
				// console.log(a);
				a.map((item,index) =>{
					this.data.map((item1,index1) =>{
						if(item == item1.id){
							this.ruleForm.list[index] = {
								id: '',
								accreditId: '',
								companyName: item1.parentName,
								companyId: item1.id
							}
						}
					})
				})
			},
			imgPreview(file,fileList) {
                this.contentImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.file = file.raw
                    this.ruleForm.contentImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            }, 
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	   border: 1px dashed #d9d9d9;
	   border-radius: 6px;
	   cursor: pointer;
	   position: relative;
	   width:180px;
	   overflow: hidden;
	 }
	 
	 .avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	 }
	 .el-upload--text{
	     width:180px;
	 }
	 .avatar-uploader-icon {
	   font-size: 28px;
	   color: #8c939d;
	   width: 178px;
	   height: 178px;
	   line-height: 178px;
	   text-align: center;
	 }
	 .avatar {
	   width: 178px;
	   height: 178px;
	   display: block;
	 }
</style>